<template>
    <div>
        <el-table
            :data='tableData'
            border
            class='table'
            ref='multipleTable'
            header-cell-class-name='table-header'
            @selection-change='handleSelectionChange'
        >
            <el-table-column label='ID'>
                <template #default='scope'><a :href='scope.row.url'>{{ scope.row.id }}</a></template>
            </el-table-column>
            <el-table-column prop='lang' label='语言'></el-table-column>
            <el-table-column label='状态' align='center'>
                <template #default='scope'>
                    <el-tag
                        :type="
                                scope.row.state === 'Accepted'
                                    ? 'success'
                                    : 'danger'
                            "
                    >{{
                            scope.row.state === 'Accepted' ?
                                'AC' : scope.row.state === 'Wrong Answer' ?
                                'WA' : scope.row.state === 'Time Limit Exceed' ?
                                    'TLE' : scope.row.state === 'Memory Limit Exceed' ?
                                        'MLE' : 'CE'
                        }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop='date' label='提交时间'></el-table-column>
        </el-table>
    </div>
</template>

<script>
import { fetchHistory } from '../../api/index';

export default {
    name: 'SubmitHistory',
    data() {
        return {
            tableData: [],
            query: {
                pageIndex: 1,
                pageSize: 5
            }
        };
    },
    created() {
        this.getData();
    },
    methods: {
        // 获取 easy-mock 的模拟数据
        getData() {
            fetchHistory(this.query).then(res => {
                console.log(res);
                this.tableData = res.list;
                this.pageTotal = res.pageTotal || 50;
            });
        }
    }
};
</script>

<style scoped>
a{
    text-decoration: underline;
}
</style>